<template>
  <div>
    <!-- 修改报告样式 -->
    <el-form
      :model="addForm"
      ref="addFormRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="标题" prop="reportTitle">
        <el-input v-model="addForm.reportTitle" placeholder="请输入报告标题" />
      </el-form-item>
      <el-form-item label="联系人" prop="name">
        <el-input v-model="addForm.name" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phoneNumber">
        <el-input v-model="addForm.phoneNumber" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item
        label="页眉"
        prop="headerImg"
        style="width: 100%"
        v-if="is_show"
      >
        <UploadImage fileName="headerImg" v-model="addForm" />
      </el-form-item>
      <el-form-item
        label="页脚:"
        prop="footerImg"
        style="width: 100%"
        v-if="is_show"
      >
        <UploadImage fileName="footerImg" v-model="addForm" />
      </el-form-item>
    </el-form>

    <div class="fixed bottom-2 right-2">
      <el-button @click="handleCancel(0)">取消</el-button>
      <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import UploadImage from "@/components/UploadImage.vue";
import { handleApiResponse } from "@/utils/request.js";
import { CreateZongStyleInfo } from "../../../../../../wailsjs/go/api/CustomerApi";

onMounted(() => {
  if (props.detailForm.id != 0) {
    addForm.value = props.detailForm;
  }

  setTimeout(() => {
    is_show.value = true;
  }, 500);
});

const is_show = ref(false);

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {
      return { id: 0 };
    },
  },
});

const addFormRef = ref(null);
const addForm = ref({
  id: 0,
  reportTitle: "", // 标题
  name: "", // 联系人
  phoneNumber: "", // 联系方式
  headerImg: "", // 页眉
  footerImg: "", // 页脚
});

const handleCancel = (val = 0) => {
  addFormRef.value.resetFields();
  emit("handleBack", val);
};

const handleSubmit = () => {
  addFormRef.value.validate((valid) => {
    if (!valid) return;
    handleApiResponse(() => CreateZongStyleInfo(addForm.value)).then((res) => {
      if (res.code == 0) {
        ElMessage.success("提交成功");
        handleCancel(1);
      }
    });
  });
};

const rules = ref({
  reportTitle: [{ required: true, message: "请输入标题" }],
  name: [{ required: true, message: "请输入联系人" }],
  phoneNumber: [{ required: true, message: "请输入联系方式" }],
  address: [{ required: true, message: "请输入地址" }],
  headerImg: [{ required: true, message: "请上传页眉" }],
  footerImg: [{ required: true, message: "请上传页脚" }],
});
</script>

<style scoped lang="scss">
</style>